<script setup>
import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getMyForumCommentListService, getMyPostForumCommentListService, deleteForumCommentByCommentIdService } from '@/api/forumComment';
import { getCurrentInstance } from "vue";
import { useUserInfoStore } from '@/store/userInfo';

const userInfoStore = useUserInfoStore()

const { proxy } = getCurrentInstance(); // 获取全局注册的组件

const router = useRouter()
const route = useRoute()

// 搜索条件
const tabName = ref(0)
const formData = ref({
  userId: null,
  replyUserId: null, // 接收人ID
  pageNum: 1, // 页数
  pageSize: 8, // 每页条数
  orderType: 0, // 排序方式
})

// 评论列表
const articleCommentList = ref([])
const articleCommentListTotal = ref(0)

// 获取“我的文章评论列表”（其他人评论我，接收人是我）
const getMyForumCommentList = async () => {
  let res = await getMyForumCommentListService(formData.value)
  console.log("获取“我的文章评论列表”（其他人评论我，接收人是我）", res.data)
  articleCommentList.value = res.data.forumCommentList
  articleCommentListTotal.value = res.data.total
}

// 获取“我发表的文章评论”（我评论其他人，发表人是我）
const getMyPostForumCommentList = async () => {
  let res = await getMyPostForumCommentListService(formData.value)
  console.log("获取“我的文章评论列表”（其他人评论我，接收人是我）", res.data)
  articleCommentList.value = res.data.forumCommentList
  articleCommentListTotal.value = res.data.total
}

// 搜索条件切换
const handleTabChange = (tab) => {
  tabName.value = tab.props.name
  if (tabName.value == 0) {
    // 我的文章评论
    getMyForumCommentList()
  } else if (tabName.value == 1) {
    // 我发表的文章评论
    getMyPostForumCommentList()
  }
}

// 页数变化
const handleCurrentChange = (num) => {
  formData.value.pageNum = num
  if (tabName.value == 0) {
    // 我的文章评论
    getMyForumCommentList()
  } else if (tabName.value == 1) {
    // 我发表的文章评论
    getMyPostForumCommentList()
  }
}


// 删除评论对话框显示条件
const showDeleteForumCommentDialogCondition = ref(false)
// 当前选中的评论
const chooseForumComment = ref({})
// 显示删除评论对话框
const showDeleteForumCommentDialog = (item) => {
  showDeleteForumCommentDialogCondition.value = true
  chooseForumComment.value = item
}
// 关闭删除评论对话框
const closeDeleteForumCommentDialog = () => {
  showDeleteForumCommentDialogCondition.value = false
}
// 删除评论
const deleteForumCommentByCommentId = async () => {
  const res = await deleteForumCommentByCommentIdService({
    "commentId": chooseForumComment.value.commentId
  })
  // 关闭删除评论对话框
  closeDeleteForumCommentDialog()
  // 我们自己封装的通知框
  proxy.Notification.success("评论删除成功")
  // 重新获取评论列表
  if (tabName.value == 0) {
    // 我的文章评论
    getMyForumCommentList()
  } else if (tabName.value == 1) {
    // 我发表的文章评论
    getMyPostForumCommentList()
  }
}

onMounted(() => {
  formData.value.userId = route.params.userId
  formData.value.replyUserId = route.params.userId
  getMyForumCommentList()
})
</script>

<template>
  <div class="user-comment">
    <!-- 头部搜索条件 -->
    <div class="list-header">
      <el-tabs v-model="formData.orderType" class="demo-tabs" @tab-click="handleTabChange">
        <el-tab-pane label="我的文章评论" :name="0"></el-tab-pane>
        <el-tab-pane label="我发表的评论" :name="1"></el-tab-pane>
      </el-tabs>
      <div class="list-total">评论总数：{{ articleCommentListTotal }}</div>
    </div>
    <!-- 若无评论 -->
    <el-empty v-if="articleCommentListTotal == 0" :image-size="100" description="目前暂无评论记录"></el-empty>
    <!-- 评论列表 -->
    <div v-if="articleCommentListTotal != 0" class="user-comment-list">
      <div class="user-comment-list-item" v-for="(item, index) in articleCommentList">
        <div class="img-avatar-box">
          <img v-if="item.avatar != null" :src="item.avatar" alt="">
          <img v-else src="../../assets/default_avatar.jpg" alt="">
        </div>
        <div class="comment-box">
          <div class="user-comment-list-item-title">
            <div class="user-comment-list-item-title-l">
              <span class="user-name" v-if="tabName == 0">{{ item.nickname }}</span>
              <span class="user-name" v-if="tabName == 1">我</span>
              <span class="post-time">{{ item.postTime.split(" ")[0] }}</span>
              <span>评论了</span>
              <span class="user-name" v-if="tabName == 0">你</span>
              <span class="user-name" v-if="tabName == 1">{{ item.replyNickname }}</span>
              <span>的文章</span>
              <router-link :to="`/article/detail/${item.articleId}`" class="article-title">{{ item.articleTitle
              }}</router-link>
            </div>
            <div class="user-comment-list-item-title-r" v-if="userInfoStore.userInfo.userId == item.replyUserId">
              <ul>
                <li style="color: red;cursor: pointer;" @click="showDeleteForumCommentDialog(item)">删除</li>
              </ul>
            </div>
          </div>
          <div class="user-comment-list-item-content">
            <span>{{ item.content }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页区域 -->
    <div v-if="articleCommentListTotal != 0" class="pagination">
      <el-pagination @current-change="handleCurrentChange" :page-size="Number(formData.pageSize)"
        :total="articleCommentListTotal" background layout="prev, pager, next" />
    </div>

    <!-- 删除文章确认框 -->
    <el-dialog v-model="showDeleteForumCommentDialogCondition" width="500"
      :before-close="closeDeleteForumCommentDialog">
      <div style="padding-top: 15px;"> 确定要删除该文章吗？</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDeleteForumCommentDialog">取消</el-button>
          <el-button type="danger" @click="deleteForumCommentByCommentId"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 头部搜索条件 */
.user-comment .list-header {
  border-bottom: 1px solid #e4e6eb;
  padding: 5px 20px 0px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-comment .list-header .list-total {
  color: #8a919f;
}

/* 评论列表 */
.user-comment-list .user-comment-list-item {
  padding: 10px 0;
  border-bottom: 1px dotted #ddd;
  padding-left: 20px;
  padding-right: 20px;
  cursor: default;
  display: flex;
}

.user-comment-list .user-comment-list-item:hover {
  background-color: #f7f8fa;
}

.user-comment-list .user-comment-list-item .img-avatar-box {
  width: 32px;
  height: 32px;
  background-color: pink;
  border-radius: 50%;
  margin-top: 4px;
}

.user-comment-list .user-comment-list-item .img-avatar-box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.user-comment-list .user-comment-list-item .comment-box {
  margin-left: 10px;
  flex: 1;
}

.user-comment-list .user-comment-list-item .user-comment-list-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.user-comment-list .user-comment-list-item .user-comment-list-item-title .user-comment-list-item-title-l {
  font-size: 14px;
  color: #999;
}

.user-comment-list .user-comment-list-item .user-comment-list-item-title .user-comment-list-item-title-l span {
  margin-right: 8px;
}

.user-comment-list .user-comment-list-item .user-comment-list-item-title .user-comment-list-item-title-l .user-name {
  color: rgb(79, 79, 79);
}

.user-comment-list .user-comment-list-item .user-comment-list-item-title .user-comment-list-item-title-l .post-time {
  color: #999;
}

.user-comment-list .user-comment-list-item .user-comment-list-item-title .user-comment-list-item-title-l .article-title {
  color: green;
}

.user-comment-list .user-comment-list-item .user-comment-list-item-content {
  font-size: 14px;
  color: #4f4f4f;
}

/* 分页区域 */
.pagination {
  padding: 10px;
}
</style>